<template>
  <div v-loading="tableLoading"
       element-loading-text="拼命加载中...">
    <el-table :data="tableData"
              :border="isBorder"
              :style="{width:elTableWidth}"
              :span-method="mergeTable"
							@selection-change="handleSelectionChange">
			<el-table-column v-if="isSelection"
      								 type="selection"
      								 width="55">
    	</el-table-column>
      <el-table-column v-if="isTableIndex"
                       label="序号"
                       :align='align'
                       :width="indexWidth">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column v-for="item in tableColumns"
                       :key='item.key'
                       :label="item.name"
                       :align='align'
											 :width="item.width || columnWidth"
                       :show-overflow-tooltip="item.tip">
        <template slot="header"
                  v-if="item.isSlotheader">
          <div @click="handlerSlotheader(item)"
               class="tableheader">
            <i class="el-icon-d-caret"></i>
            <div class="grid-content">{{item.name}}</div>
          </div>
        </template>

        <template slot-scope="scope">
          <slot :name="item.key"
                :row="scope.row">
            <span style="margin-left: 10px;color:#409EFF;cursor:pointer"
                  @click="handlerTable(item.event,scope.row)"
                  v-if="item.event">{{ scope.row[item.key] }}</span>
            <span style="margin-left: 10px"
                  v-else>{{ scope.row[item.key] }}</span>
          </slot>
        </template>>
      </el-table-column>
      <slot name="operate">
        <el-table-column v-if="tableOperate.length!==0"
				                 fixed="right"
                         label="操作"
                         :align='align'
                         :width="operateWidth">
          <template slot-scope="scope">
            <el-button size="mini"
                       v-permissions="item.role"
                       v-for="item in tableOperate"
                       :type="item.color"
                       :key="item.type"
                       :icon="item.icon?item.icon:''"
                       @click="handlerOperate(item,scope.row)">{{item.name}}</el-button>
          </template>
        </el-table-column>
      </slot>
    </el-table>
    <div class="pagination"
         v-if="isPagination">
      <el-pagination @size-change="handlerSizeChange"
                     @current-change="handlerCurrentChange"
                     :current-page="pagination.pageNum"
                     :page-sizes="pagination.pageSizes"
                     :page-size="pagination.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="tableTotal">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
	name : 'tableCom',
	props : {
		url : { // 接口地址
			type : String,
			required : true
		},
		align : { // 表格对齐
			type : String,
			default : 'center'
		},
		isBorder : { // 是否带有纵向边框
			type : Boolean,
			default : true
		},
		isSelection : { // 是否可以复选
			type : Boolean,
			default : false
		},
		elTableWidth : { // 表格宽
			type : String,
			default : '100%'
		},
		columnWidth : { // 列宽
			type : Number,
			default : 160
		},
		operateWidth : { // 表格操作项宽
			type : Number,
			default : 100
		},
		tableColumns : {// 表格标题
			type : Array,
			required : true
		},
		isPagination : { // 是否有分页
			type : Boolean,
			default : true
		},
		pagination : { // 分页器信息
			type : Object,
			default () {
				return {
					pageNum : 1,
					pageSizes : [100, 150, 200],
					pageSize : 100
				};
			}
		},
		tableOperate : { // 操作项
			type : Array,
			default () {
				return [];
			}
		},
		isTableIndex : { // 是否有序号
			type : Boolean,
			default : false
		},
		indexWidth : { // 序号宽度
			type : Number,
			default : 50
		},
		isMergeTable : { // 是否有合并
			type : Boolean,
			default : false
		}
	},
	data () {
		return {
			tableTotal : 0,
			tableLoading : false,
			queryForm : {},
			tableData : []
		};
	},
	created () {
		this.fetchData({
			pageNum : 1,
			pageSize : 100
		});
	},
	methods : {
		// 获取表格数据
		async fetchData (pagination, queryForm = {}, callback) {
			if (Object.keys(queryForm).length!==0){
				this.queryForm = queryForm;
			}
			try {
				this.tableLoading = true;
				let result = await this.$api.tableFetchData({
					url : `${this.url}/${pagination.pageNum}/${pagination.pageSize}`,
					data : {...this.queryForm }
				});
				this.pagination.pageNum = pagination.pageNum;
				this.pagination.pageSize = pagination.pageSize;
				callback && callback();
				this.tableData = result.data.rows;
				this.tableTotal = result.data.total;
			} finally {
				callback && callback();
				this.tableLoading = false;
			}

		},
		// 控制每页展示多少条
		handlerSizeChange (val) {
			this.pagination.pageSize = val;
			const { pageNum, pageSize } = this.pagination;
			this.fetchData({
				pageNum,
				pageSize
			});
		},
		// 控制分页页数
		handlerCurrentChange (val) {
			this.pagination.pageNum = val;
			const { pageNum, pageSize } = this.pagination;
			this.fetchData({
				pageNum,
				pageSize
			});
		},
		// 表头点击操作
		handlerSlotheader (event) {
			this.$emit('handlerSlotheader', event);
		},
		// table单元格点击
		handlerTable (event, data) {
			this.$emit('handlerTable', event, data);
		},
		// 操作项点击
		handlerOperate (event, data) {
			this.$emit('handlerOperate', event, data);
		},
		// 合并的操作
		mergeTable ({ row, column, rowIndex, columnIndex }) {
			if (this.isMergeTable) {
				return this.$parent.mergeTable({ row, column, rowIndex, columnIndex });
			}
		},
		// 传递选择的数据
		handleSelectionChange (rows) {
			if (rows.length>0){
				this.$emit('handlerPutRows', rows);
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}
.tableheader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
}
</style>
